/*
* @Author: Yejing
* @Date: 2023-05-29 17:39:21
* @LastEditors: Yejing
* @LastEditTime: 2023-07-03 14:34:20
* @Description: 三种状态的商品卡片
*/
<template>
	<view class="c-product-card">
		<view class="best-list box" :style="rightBtn ? 'display:block;position:relative;' : ''">
			<view class="left">
				<view class="img-group">
					<u-image width="160rpx" height="160rpx" :src="card.image"></u-image>
				</view>
				<view class="nu">
					<view class="top">
						<text style="overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;">{{ card.goodsName }}</text>
						<text class="u-line-2">{{ card.goodsDesc }}</text>
					</view>
					<text v-if="type=='money'" :style="rightBtn ? 'color:#000000;' : ''">${{
                      publicJS.toFixed(card.price)
                      }}</text>
					<view class="u-tag" v-if="type == 'live'">
						<u-image :src="tagS" width="17rpx" height="18rpx"></u-image>
						Live
					</view>
				</view>
			</view>
			<view class="right-btn" v-if="rightBtn">
				<u-button :custom-style="getButton">Buy Now</u-button>
			</view>
			<view class="right" v-if="arrowRight">
				<text>
					<u-icon name="arrow-right" color="#fff" size="24"></u-icon>
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//卡片数据
			card: {
				type: Object,
				default: {}
			},
			//类型
			type: {
				type: String,
				default: 'money'
			},
			//是否需要右边按钮
			rightBtn: {
				type: Boolean,
				default: false
			},
			//是否需要右边箭头
			arrowRight: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				tagS: require('static/images/iconS.png'),
				//按钮自定义样式
				getButton: {
					padding: '10rpx 28rpx',
					background: '#2934D0',
					borderRadius: '25rpx',
					color: '#fff',
					fontSize: '20rpx',
					height: '50rpx',
					lineHeight: '50rpx'
				},
			}
		}
	}
</script>

<style lang="scss" scoped>
	.best-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
		border: 2rpx solid #E1E8E8;
		padding: 20rpx 40rpx 20rpx 20rpx;
		margin-bottom: 30rpx;

		.left {
			display: flex;

			.img-group {
				width: 160rpx;
				height: 160rpx;
			}

			.nu {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.top {
					flex: 1;
				}

				.u-tag {
					background: #2934D0 !important;
					border-radius: 6rpx;
					color: #fff;
					width: 95rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.u-image {
						margin-right: 5rpx;
						top: -12rpx;
					}

				}

			}
		}
	}

	.box {
		.left {
			uni-text {
				// display: block;


				&:nth-child(1) {
					font-size: 36rpx;
					color: #02010E;
				}

				&:nth-child(2) {
					font-size: 30rpx;
					color: #6A6A6A;
					padding: 5rpx 0;
				}

				&:nth-child(3) {
					font-size: 36rpx;
					color: #02010E;
				}
			}
		}

		.right {
			uni-text {
				display: block;
				width: 60rpx;
				height: 60rpx;
				background: #1B1D29;
				border-radius: 14rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.right-btn {
			position: absolute;
			right: 30rpx;
			bottom: 20rpx;
		}
	}
</style>